<template>
  <div>
    <overview v-if="active === 'overview'" ref="overRef" :data="data" />
    <demand v-else-if="active === 'demand'" ref="demand" :datas="data" />
    <tasks v-else-if="active === 'tasks'" :datas="data" />
    <work v-else-if="active === 'work'" :datas="data" />

    <ze-tabbar :active="active" :items="tabs" @change="onChange" />
  </div>
</template>

<script>
import overview from './tabs/overview/index.vue'
import demand from './tabs/demand/index.vue'
import tasks from './tabs/tasks/index.vue'
import work from './tabs/work/index.vue'
import { tabItems } from './config'
import ZeTabbar from '@/components/ze-tabbar/index.vue'
import { CHANGE_GUEST_TAB, emitter } from '@/utils/emitter'

export default {
  components: {
    ZeTabbar,
    overview,
    demand,
    tasks,
    work,
  },
  data() {
    return {
      active: 'overview',
      tabs: tabItems,
      data: {},
    }
  },
  onLoad(options) {
    // console.log(options, '项目基本信息1')
    this.data = JSON.parse(options.projData)
    // uni.$emit('XMGS', JSON.parse(options.projData))
    // this.bus.$emit('XMGS', JSON.parse(options.projData))
  },
  mounted() {
    emitter.on(CHANGE_GUEST_TAB, (name) => {
      if (this.tabs.map(item => item.name).includes(name)) {
        this.active = name
      }
    })
  },
  beforeDestroy() {
    emitter.off(CHANGE_GUEST_TAB)
  },
  methods: {
    onChange(name) {
      this.active = name
    },
  },
}
</script>

<style lang="scss" scoped></style>
